<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div class="mychart" style="height:400px; width:80%;margin: 100px auto;"></div>
</body>
<script src="../jquery.min.js"></script>
<script src="echart.js/echarts.min.js"></script>
<script>
    var mychart = echarts.init($(".mychart")[0])

    var option = {
        title: {

            text: '某地区蒸发量和降水量(主标题)',  //'\n'指定换行

            subtext: '纯属虚构(副标题)',   //副标题
        },

        legend: {
           // data: ['蒸发量', '','降水量']
            //图例内容数组，数组项通常为{string}，每一项代表一个系列series的name，默认布局到达边缘会自动分行（列），传入空字符串''可实现手动分行（列）。
            // 使用根据该值索引series中同名系列所用的图表类型和itemStyle，如果索引不到，该item将默认为没启用状态。
            //如需个性化图例文字样式，可把数组项改为{Object}，指定文本样式和个性化图例icon，格式为
            // {
            //     name : {string},
            //     textStyle : {Object},
            //     icon : {string}
            // }
           data:[
               {  name:'蒸发量',
                   textStyle:{
                       fontSize:12,
                       fontWeight:'bolder',
                       color:'#cccccc'
                   },
                   icon:'image://./自定义iconimage/comments.png'//格式为'image://+icon文件地址'，其中image::后的//不能省略
               },
               {  name:'降水量',
                   textStyle:{
                       fontSize:12,
                       fontWeight:'bolder',
                       color:'#cccccc'
                   },
                   icon:'image://./自定义iconimage/more_unfold.png'//格式为'image://+icon文件地址'，其中image::后的//不能省略
               }
           ],

           // show:false,  //是否显示图列
          //  zlevel:1, //一级层叠控制。每一个不同的zlevel将产生一个独立的canvas，相同zlevel的组件或图标将在同一个canvas上渲染。zlevel越高越靠顶层，。
           // z:4, 二级层叠控制,同一个canvas（相同zlevel）上z越高约靠顶层。
            orient:'horizontal',  //布局方式，默认为水平布局，可选为：'horizontal' | 'vertical'
            x:"",  // 水平安放位置，默认为全图居中，可选为：'center' | 'left' | 'right' | {number}（x坐标，单位px）;
            y:'bottom',
            backgroundColor:'green',
            borderWidth:5,
            borderColor:'red',
            padding:10,  //图列离边框的内边距
            itemGap:20,   //各个item(两个name)之间的间隔，单位px，默认为10，横向布局时为水平间隔，纵向布局时为纵向间隔，见下图
            itemWidth: 40,  //图列lengend的宽高
            itemHeight: 30,
            textStyle: {
                fontFamily: 'Arial, Verdana',
                fontSize: 12,
                fontStyle: 'normal',
                fontWeight: 'normal',
            },
            selectedMode:'single', //选择模式，默认开启图例开关，可选single，multiple
            selected:{}  ,//配置默认选中状态，可配合LEGEND.SELECTED事件做动态数据载入，try this »
           // formatter:'aa',
            formatter:function () {
                return"<a>搜索"
            },//文本格式器  string 或者function





        },
        tooltip:{trigger: 'axis'},
        toolbox: {
            show: true,
            feature: {
                mark: {show: true},
                dataView: {show: true, readOnly: false},
                magicType: {show: true, type: ['line', 'bar']},
                restore: {show: true},
                saveAsImage: {show: true}
            }
        },
        calculable: true,
        xAxis: [
            {
                type: 'category',
                data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
            }
        ],
        yAxis: [
            {
                type: 'value'
            }
        ],
        series: [
            {
                name: '蒸发量',
                type: 'bar',
                data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
                markPoint: {
                    data: [
                        {type: 'max', name: '最大值'},
                        {type: 'min', name: '最小值'}
                    ]
                },
                markLine: {
                    data: [
                        {type: 'average', name: '平均值'}
                    ]
                }
            },
            {
                name: '降水量',
                type: 'bar',
                data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
                markPoint: {
                    data: [
                        {name: '年最高', value: 182.2, xAxis: 7, yAxis: 183, symbolSize: 18},
                        {name: '年最低', value: 2.3, xAxis: 11, yAxis: 3}
                    ]
                },
                markLine: {
                    data: [
                        {type: 'average', name: '平均值'}
                    ]
                }
            }
        ]
    };
    mychart.setOption(option)


</script>
</html>